<template>
    <div class="app-container">
        <div class="resource">
            <div class="checkbox" v-for="item in checkedMenus">
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
                    :key="item.id" :label="item.id">{{ item.name
                    }}</el-checkbox>
                <div></div>
                <el-checkbox-group v-model="resourceList" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="el in resourceList" :key="el.id" :label="el.id">{{
                        el.name
                    }}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import * as role from "@/request/role"

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedMenus = ref([]) as any
let resourceList = [] as any

const handleCheckAllChange = (val: any) => {
    checkedMenus.value = val ? resourceList : []
    isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: any[]) => {
    console.log(value);
    const checkedCount = value.length
    checkAll.value = checkedCount === resourceList.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < resourceList.length
}
//获取所有后台资源分类
role.resourceCategoryAll().then(res => {
    if (res.code === 200) {
        checkedMenus.value = res.data
    }
})
//获取所有后台资源
role.resourceAll().then(res => {
    if (res.code === 200) {
        resourceList = res.data
    }
})


</script>

<style scoped lang="less">
.resource {
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}
</style>